<template>
    <div>
         <h4><router-link to="/business/chapter">{{course.name}} ==> {{chapter.name}}</router-link></h4>
        <p>
            <button @click="list(1)" class="btn btn-white btn-default btn-round">
				<i class="ace-icon fa fa-refresh"></i>
					刷新
			</button>
            &nbsp;&nbsp;
            <button @click="addModel()" class="btn btn-white btn-default btn-round">
				<i class="ace-icon fa fa-refresh"></i>
					新增
			</button>
        </p>
        <Pagination ref="Pagination" v-bind:list="list"></Pagination> 
        <!-- PAGE CONTENT BEGINS -->
        <table id="simple-table" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <!-- <th>课程ID</th> -->
                    <!-- <th>大章</th> -->
                    <th>VOD</th>
                    <th>时长</th>
                    <th>收费</th>
                    <th>顺序</th>
                    <!-- <th>创建时间</th> -->
                    <!-- <th>修改时间</th> -->
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="section in sections" :key="section.id">
                    <td>{{section.id}}</td>
                    <td>{{section.title}}</td>
                    <!-- <td>{{section.courseId}}</td> -->
                    <!-- <td>{{section.chapterId}}</td> -->
                    <td>{{section.vod}}</td>
                    <td>{{section.time | formatSecond}}</td>
                    <td>{{CHARGE | optionKV(section.charge)}}</td>
                    <td>{{section.sort}}</td>
                    <!-- <td>{{section.createdAt}}</td> -->
                    <!-- <td>{{section.updatedAt}}</td> -->
                    <td>
                         <div class="btn-group">
                            <button v-on:click="play(section)" class="btn btn-white btn-xs btn-info btn-round">
                                播放
                            </button>&nbsp;
                            <button v-on:click="editModel(section)" class="btn btn-white btn-xs btn-info btn-round">
                                编辑
                            </button>&nbsp;
                            <button v-on:click="del(section.id)" class="btn btn-white btn-xs btn-warning btn-round">
                                删除
                            </button>
                        </div>
                        <div class="hidden-md hidden-lg">
                            <div class="inline pos-rel">
                                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                </button>

                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                <li>
                                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                                    <span class="blue">
                                        <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                    </span>
                                    </a>
                                </li>

                                <li v-on:click="editModel(section)">
                                    <a   class="tooltip-success" data-rel="tooltip" title="Edit">
                                    <span class="green">
                                        <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                    </span>
                                    </a>
                                </li>

                                <li v-on:click="del(section.id)">
                                    <a  class="tooltip-error" data-rel="tooltip" title="Delete">
                                    <span class="red">
                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                    </span>
                                    </a>
                                </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- Modal -->
        <div class="modal fade" id="section-form" tabindex="10" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input v-model="section.title" autocomplete="off" type="text" class="form-control" id="title" placeholder="标题">
                    </div>
                    <div class="form-group">
                        <label for="courseId">课程ID</label>
                        <input disabled v-model="course.name" autocomplete="off" type="text" class="form-control" id="courseId" placeholder="课程ID">
                    </div>
                    <div class="form-group">
                        <label for="chapterId">大章</label>
                        <input disabled v-model="chapter.name" autocomplete="off" type="text" class="form-control" id="chapterId" placeholder="大章">
                    </div>
                    <div class="form-group">
                        <label for="video">视频</label>
                        <VodFile
                            v-bind:input-id="'video-upload'" 
                            v-bind:text="'上传大视频'"
                            v-bind:suffixs="['mp4','avi','flv', 'wmv']"
                            v-bind:afterUpload="afterUpload"
                            v-bind:use="FILE_USE.COURSE.key"
                        ></VodFile>
                        <Player ref="player" v-bind:player-id="'form-player-div'"></Player>
                        <div v-show="section.video" class="row">
                            <div class="col-md-9">
                                <video :src="section.video" id="video" controls="controls" hidden/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="time">时长</label>
                        <input v-model="section.time" autocomplete="off" type="text" class="form-control" id="time" placeholder="时长">
                    </div>
                    <div class="form-group">
                        <label for="time">VOD</label>
                        <input v-model="section.vod" class="form-control" id="vod" disabled>
                    </div>
                    <div class="form-group">
                        <label for="time">视频</label>
                        <input v-model="section.video" class="form-control" id="video" disabled>
                    </div>
                    <div class="form-group">
                        <label for="charge">收费</label>
                        <select v-model="section.charge" class="chosen-select form-control" >
                            <option v-for="o in CHARGE" :key="o.key" v-bind:value="o.key">{{o.value}}</option>
                        </select>
                        <!-- <input v-model="section.charge" autocomplete="off" type="text" class="form-control" id="charge" placeholder="收费"> -->
                    </div>
                    <div class="form-group">
                        <label for="sort">顺序</label>
                        <input v-model="section.sort" autocomplete="off" type="text" class="form-control" id="sort" placeholder="顺序">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button @click="save()" type="button" class="btn btn-primary">保存</button>
            </div>
            </div>
        </div>
        </div>
        <modal-player ref="modalPlayer"></modal-player>
    </div><!-- /.span -->
</template>
<script>
  import Pagination from '../../components/pagination'
  import BigFile from '../../components/big-file'
  import VodFile from '../../components/vod'
  import Player from '../../components/player'
  import Toast from '../../../public/static/js/toast'
  import Loading from '../../../public/static/js/loading'
  import Confirm from '../../../public/static/js/confirm'
  import Validator from '../../../public/static/js/validator'
  import Tool from "../../../public/static/js/tool";
  import ModalPlayer from '../../components/modal-player.vue' 

  export default {
    components: { Pagination,BigFile,VodFile,Player, ModalPlayer},
    name: "sections",
    data() {
        return {
            base: `${process.env.VUE_APP_BASE_URL}/business`,
            section: {},
            sections: [],
            chapter: {},
            course: {},
            CHARGE: SECTION_CHARGE,
            FILE_USE:FILE_USE
        }
    },

     mounted: function() {
        // 调用父组件的activeSidebar方法
        this.$parent.activeSidebar("business-course-sidebar")
        let _this = this;
        // 初始化每页条数
        _this.$refs.Pagination.size = 10
        let chapter = SessionStorage.get(SESSION_KEY_CHAPTER) || {}
        let course = SessionStorage.get(SESSION_KEY_COURSE) || {}
        if(Tool.isEmpty(chapter)) {
            _his.$router.push('/welcome')
        }
        _this.chapter = chapter
        _this.course = course
        _this.list(1);
    },
    methods: {
        addModel() {
            let _this = this
            _this.section = {}
            $('#section-form').modal("show")
        },
        list(page) {
            let _this = this;
            Loading.show()
            _this.$axios.get(`${_this.base}/admin/sections`, {
                params: {
                    page: page,
                    size: _this.$refs.Pagination.size,
                    chapterId: _this.chapter.id,
                    courseId: _this.course.id
                }
            }).then(res => {
                Loading.hide()
                _this.sections = res.data.data.list
                _this.$refs.Pagination.render(page, res.data.data.total)
            })
        },
        save() {
            let _this = this;
            _this.section.video = "";
            /* if (!Validator.require(_this.section.name, '名称')
                || !Validator.require(_this.section.courseId, '课程ID')
                || !validator.length(_this.section.courseId, '课程ID' , 1, 8)) {
                return
            } */
            _this.section.courseId = _this.course.id
            _this.section.chapterId = _this.chapter.id
            Loading.show()
            _this.$axios.post(`${_this.base}/admin/sections`, _this.section).then(res => {
                Loading.hide()
                if(res.data.success) {
                    $('#section-form').modal("hide")
                    Toast.success("添加成功")
                    _this.list(_this.$refs.Pagination.page)
                } else{ 
                    Toast.error("添加失败")
                }
            })
        },
        editModel(section) {
            let _this = this;
            // 使用空对象复制，防止编辑时直接修改data的属性(vue双向绑定会即时渲染)
            _this.section = $.extend({}, section)
            $('#section-form').modal("show")
        },
        del(sectionId) {
            Confirm.show('确定要删除吗?', () => {
                let _this = this;
                Loading.show()
                _this.$axios.delete(`${_this.base}/admin/sections/${sectionId}`).then(res => {
                    Loading.hide()
                    if(res.data.success) {
                        Toast.success("删除成功")
                        _this.list(_this.$refs.Pagination.page)
                    }else {
                        Toast.error("删除失败")
                    }
                })
            })
        },
        afterUpload(res) {
            document.getElementById("video").value= ''
            let _this = this;
            let video = res.data.data.path;
            let vod = res.data.data.vod;
            _this.$set(_this.section, "video", video)
            _this.$set(_this.section, "vod", vod)
            _this.getTime()
            _this.$refs.player.playUrl(video)
        },
        getTime() {
            let _this = this
            let ele = document.getElementById("video");
            ele.onloadedmetadata = function () {
                _this.section.time = parseInt(ele.duration, 10);
            }
        },
        play(section) {
            let _this = this
            _this.$refs.modalPlayer.playVod(section.vod)
        }
    }
  }
</script>
<style scoped>
    video {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }
</style>